<template>
  <div>
    <div class="label">{{userInfo.fisstatename}}</div>
    <van-nav-bar class="header" title="个人中心">
      <div slot="right">
        <span class="editBtn" @click="toUserEdit">编辑</span>
        <!-- <van-tag type="success">标签</van-tag> -->
        <!-- <van-tag type="warning">{{userInfo.fisstatename}}</van-tag> -->
      </div>
      <van-icon name="search" />
    </van-nav-bar>
    <div style="text-align: left">
      <van-cell-group title="个人信息">
        <van-cell center :value="userInfo.fnickname" >
          <template slot="title">
            <van-image round width="50" height="50" :src="userInfo.headimgurl" />
          </template>
        </van-cell>
        <van-field label="用户姓名：" v-model="userInfo.fusername" readonly></van-field>
        <van-field label="登录名称：" v-model="userInfo.floginname" readonly></van-field>
        <van-field label="手机号：" v-model="userInfo.fphone" readonly>
          <!-- <van-icon slot="icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/> -->
        </van-field>
      </van-cell-group>
      <div class="centerButton" style="margin-top: 20px;">
        <van-button @click="toCustomeBind" block type="primary">绑定单位</van-button>
      </div>
      <div class="centerButton">
        <van-button @click="toCustome" block type="info">查看单位</van-button>
      </div>
      <!-- <van-cell-group title="单位信息">
        <van-cell title="名称" center :value="customeInfo.fname">
          <van-icon slot="icon" name="manager-o" color="#56D7FF" style="margin-right: 5px;"/>
        </van-cell>
        <van-cell title="类别名称" center :value="customeInfo.fclassname">
          <van-icon slot="icon" name="points" color="#FB74CF" style="margin-right: 5px;"/>
        </van-cell>
        <van-cell title="联系电话" center :value="customeInfo.phone">
          <van-icon slot="icon" name="phone-o" color="#F1BA45" style="margin-right: 5px;"/>
        </van-cell>
        <van-cell title="地址" center :value="customeInfo.faddress">
          <van-icon slot="icon" name="location-o" color="#51BD66" style="margin-right: 5px;"/>
        </van-cell>
        <van-cell title="传真" center :value="customeInfo.ffax">
          <van-icon slot="icon" name="comment-o" color="#FF8929" style="margin-right: 5px;"/>
        </van-cell>
      </van-cell-group> -->
    </div>
    <footer-btn></footer-btn>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
  NavBar,
  Cell,
  CellGroup,
  Field,
  Image,
  Icon,
  Button,
  Tag
} from 'vant'
import footerBtn from '@/components/footerBtn'
import { redirect_my } from '@/api/user'
export default {
  name: 'index',
  components: {
    footerBtn,
    [NavBar.name]:NavBar,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Field.name]:Field,
    [Image.name]:Image,
    [Icon.name]:Icon,
    [Button.name]:Button,
    [Tag.name]:Tag,
  },
  created() {
    this.userid = 'bb5a8fe0-e03e-42ba-a1ed-279bba27b3a3'
    this.getData()
  },
  data() {
    return {
      userid: Cookies.get('fusreid'),
      userInfo: {},
      customeInfo: {}
    }
  },
  methods: {
    getData() {
      redirect_my({
        userid: this.userid
      }).then(res => {
        this.userInfo = res.sysparams.users
      })
    },
    toUserEdit() {
      this.$router.push({ path: '/userEdit' })
    },
    toCustomeBind() {
      this.$router.push({ path: '/customeBind' })
    },
    toCustome() {
      this.$router.push({ path: '/custome' })
    }
  }
}
</script>

<style scoped>
.centerButton {
  padding: 10px;
}
.editBtn {
  color: #1989fa;
  font-size: 14px;
  margin-right: 40px;
}
.label{
    font-size:13px;
    line-height:32px
    ;background:orange;
    position:absolute;
    right:0;
    top:0;
    z-Index:2;
    padding:0 2em;
    -webkit-transform-origin:left bottom;
    -moz-transform-origin:left bottom;
    transform-origin:left bottom;
    -webkit-transform:translate(29.29%,-100%) rotate(45deg);
    -moz-transform:translate(29.29%,-100%) rotate(45deg);
    transform:translate(29.29%,-100%) rotate(45deg);
    text-indent:0;
}
</style>